<template>
  <el-card>
    <el-table border :data="skuArr">
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="80"
      ></el-table-column>
      <el-table-column
        label="名称"
        prop="skuName"
        show-overflow-tooltip
        width="150"
      ></el-table-column>
      <el-table-column
        label="描述"
        prop="skuDesc"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="图片">
        <template #="{ row, index }">
          <img
            style="width: 100px; height: 100px"
            :src="row.skuDefaultImg"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column label="重量" prop="weight"></el-table-column>
      <el-table-column label="价格(元)" prop="price"></el-table-column>

      <el-table-column label="操作" :fixed="false">
        <template #="{ row, index }">
          <el-button
            @click="handleOnOrCancelSku(row)"
            :type="row.isSale ? 'info' : 'primary'"
            :icon="row.isSale == 0 ? 'Top' : 'Bottom'"
          ></el-button>
          <el-button type="primary" icon="Edit"></el-button>

          <el-button @click="showDetail(row)" icon="InfoFilled"></el-button>

          <el-popconfirm @confirm="deleteSku(row)" title="确定删除吗?">
            <template #reference>
              <el-button type="warning" icon="Delete"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin: 25px 0"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="background"
      layout=" prev, pager, next, jumper,->,total,sizes"
      :total="total"
      @size-change="getSkuListFromServer"
      @current-change="handleCurrentChange"
    />
  </el-card>

  <el-drawer v-model="isShowDrawer" direction="rtl">
    <template #header>
      <h4>查看标题详情</h4>
    </template>
    <template #default>
      <el-row>
        <el-col :span="6">名称</el-col>
        <el-col :span="18">{{ skuInfo.skuName }}</el-col>
      </el-row>

      <el-row>
        <el-col :span="6">描述</el-col>
        <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">价格</el-col>
        <el-col :span="18">{{ skuInfo.price }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">平台属性</el-col>
        <el-col :span="18">
          <el-tag
            style="margin: 0 5px"
            v-for="item in skuInfo.skuAttrValueList"
            :key="item.id"
          >
            {{ item.valueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">销售属性</el-col>
        <el-col :span="18">
          <el-tag
            type="info"
            style="margin: 0 5px"
            v-for="item in skuInfo.skuSaleAttrValueList"
          >
            {{ item.saleAttrValueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">商品图片</el-col>
        <el-col :span="18">
          <el-carousel trigger="click" height="150px">
            <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item">
              <img
                :src="item.imgUrl"
                style="width: 100%; height: 100%; object-fit: cover"
                alt=""
              />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { reqDeleteSku, reqSkuInfo, reqSkuList } from '@/api/product/sku'
import { ISkuParam } from '@/api/product/spu/type'
import { reqCancelSku, reqOnSku } from '@/api/product/sku'
import { ElMessage } from 'element-plus'
let isShowDrawer = ref<boolean>(false)
let pageSize = ref(10)
let currentPage = ref<number>(1)
let background = ref(true)
let total = ref(0)
let skuArr = ref<ISkuParam[]>([])
let skuInfo = ref<ISkuParam>()
onMounted(() => {
  getSkuListFromServer()
})

const getSkuListFromServer = async () => {
  try {
    let result = await reqSkuList(currentPage.value, pageSize.value)
    if (result.code == 200) {
      total.value = result.data.total
      skuArr.value = result.data.records
    }
  } catch (error) {
    console.log(error)
  }
}
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}

const deleteSku = async (data) => {
  try {
    let result = await reqDeleteSku(data.id)
    if (result.code == 200) {
      getSkuListFromServer()
    }
  } catch (error) {
    console.log(error)
  }
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  getSkuListFromServer()
}
const handleOnOrCancelSku = (data) => {
  if (data.isSale) {
    //这里要下架cancel
    try {
      reqCancelSku(data.id).then((res) => {
        getSkuListFromServer()
        ElMessage({
          type: 'info',
          message: '下架成功',
        })
      })
    } catch (error) {
      console.log(error)
    }
  } else {
    try {
      reqOnSku(data.id).then((res) => {
        console.log(res)
        getSkuListFromServer()
        ElMessage({
          type: 'success',
          message: '上架成功',
        })
      })
    } catch (error) {
      console.log(error)
    }
  }
}
const showDetail = async (data) => {
  try {
    let result = await reqSkuInfo(data.id)
    if (result.code == 200) {
      skuInfo.value = result.data
    }
  } catch (error) {
    console.log(error)
  }

  isShowDrawer.value = true
}
</script>

<style lang="scss" scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
